<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="基础信息" name="first">
      <el-form
        ref="form"
        label-width="100px"
        :model="formData"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title" placeholder="请输入" />
        </el-form-item>
        <!-- 第二行 作者，分类 -->
        <el-row type="flex" justify="space-eventy">
          <el-form-item label="作者" prop="author">
            <el-input
              v-model="formData.author"
              :rows="3"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="分类" prop="cateid">
            <el-select v-model="formData.cateid" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.catename"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <!-- 第三行时间和阅读次数 -->
        <el-row type="flex" justify="space-eventy">
          <el-form-item label="阅读次数" prop="click">
            <el-input-number v-model="num" :min="1" label="阅读次数" @change="handleChange" />
          </el-form-item>
          <el-form-item label="创建时间" prop="create_date">
            <div class="block">
              <span class="demonstration" />
              <el-date-picker
                v-model="formData.catename"
                value-format="timestamp"
                type="datetime"
                placeholder="选择日期时间"
              />
            </div>
          </el-form-item>
        </el-row>
        <!-- 第四行 是否推荐-->
        <el-row type="flex" justify="space-eventy">
          <el-form-item label="是否推荐">
            <el-switch
              v-model="formData.ishot"
              active-text="否"
              inactive-text="是"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-form-item label="是否置顶">
            <el-switch
              v-model="formData.istop"
              active-text="否"
              inactive-text="是"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-row>
        <!-- 收藏数量 -->
        <el-row type="flex" justify="space-eventy">
          <el-form-item label="收藏数量">
            <el-input v-model="formData.lovenum" />
          </el-form-item>
        </el-row>

        <!-- 文章缩略图 -->
        <el-row type="flex" justify="space-eventy">
          <el-form-item label="收藏数量">
            <el-upload
              class="upload-demo"
              action="#"
              :file-list="fileList"
              :http-request="httpRequest"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-row>
        <!-- 文章标签 -->
        <el-row>
          <el-form-item>
            <el-checkbox-group v-model="checkList" prop="tagname" @change="change">
              <!-- <el-checkbox-group v-model="formData.tags" prop="tagname"> -->
              <el-checkbox
                v-for="item in TagList"
                :key="item.id"
                :label="item.tagname"
              />
            </el-checkbox-group>
          </el-form-item>
        </el-row>

      </el-form>
    </el-tab-pane>
    <el-tab-pane label="SEO信息" name="second">
      <el-form ref="form" :model="formData" label-width="100px">
        <el-form-item label="Seo的关键字">
          <el-input v-model="formData.keywords" type="textarea" />
        </el-form-item>
        <el-form-item label="Seo的描述">
          <el-input v-model="formData.description" type="textarea" />
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="文章内容" name="third">
      <span>文章内容</span><quillEditor v-model.trim="formData.content" />
    </el-tab-pane>
    <el-row type="flex" justify="center">
      <el-button
        type="success"
        size="small"
        @click="onSubmit"
      >立即发布</el-button>
      <el-button size="small" type="primary" @click="dialogShow = false">保存草稿</el-button>
      <el-button size="small" type="warning" @click="dialogShow = false">返回列表</el-button>
    </el-row>
  </el-tabs>
  <!-- 表单区域 -->

</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// import bus from '@/common/bus'
import { quillEditor } from 'vue-quill-editor'
import { getYddCateAllApi, getYddTagAllApi } from '@/api/ydd_article'
import { addYddArticleInfoApi, getYddArticleInfoApi, updateYddArticleInfoApi } from '@/api/ydd_article'
import { UploadFile } from '@/api/user'
export default {
  name: 'AddFormRos',
  components: {
    quillEditor
  },
  data() {
    return {
      tags: [],
      activeName: 'first',
      // 弹框控制变量
      dialogShow: false,
      // 表单数据变量
      formData: {
        title: '', // 标题
        author: '', // 作者
        catename: '', // 分类
        create_date: '', // 创建时间
        cateid: '', // 分类ID
        click: '', // 阅读次数
        ishot: '', // 推荐
        istop: '', // 置顶
        lovenum: '', // 收藏数量
        pic: '', // 图片
        tags: '', // 标签
        content: '', // 文本框
        description: '', // 文本
        keywords: '', // 关键字
        id: ''

      },
      num: 1,
      fileList: [],
      options: [],
      checkList: [],
      TagList: []

    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改' : '添加'
    },
    id() {
      return this.$route.params.id
    }
  },
  async created() {
    const res = await getYddCateAllApi()
    console.log(res)
    this.options = res.data

    const res1 = await getYddTagAllApi()
    console.log(res1)
    // this.formData.tags = res1.data
    this.TagList = res1.data
    console.log(this.TagList)
    // .console.log(this.formData.tags)
    if (this.id) {
      this.getYddInfo()
    }
  },
  mounted() {

  },
  methods: {
    //
    change(val) {
      this.tags = val
      console.log(this.tags)
      this.formData.tags = val
    },
    handleChange(value) {
      // console.log(value)
      this.formData.click = value
    },
    // 图片上传
    async  httpRequest(val) {
      const fd = new FormData()
      fd.append('file', val.file)
      const res = await UploadFile(fd)
      console.log(res)
      this.formData.pic = res.data.savePath
    },
    // 提交行为
    async onSubmit() {
      // 表单的校验
      await this.$refs.form.validate()
      // 加工处理表单数据(拷贝一份再加工)
      this.formData.create_date = +new Date(this.formData.create_date)
      // console.log(+new Date(this.formData.create_date))
      // 请求的发生
      this.formData.id
        ? await updateYddArticleInfoApi(this.formData)
        : await addYddArticleInfoApi(this.formData)
      // 提示效果
      this.$message.success(this.formData.id ? '修改成功' : '添加成功')
      // 关闭弹框
      this.dialogShow = false
      this.$router.back()
      // 列表更新
      this.$emit('updateList')
    },
    async  getYddInfo() {
      const ress = await getYddArticleInfoApi({ id: this.id })
      console.log(ress)

      this.formData = ress.data
      this.formData.tags = ress.data.tags.split(',')
      this.checkList = ress.data.tags
      // console.log('TagList', this.TagList)
    },
    // 弹框关闭
    onClose() {
      // 表单重置
      this.formData = {
        title: '', // 标题
        author: '', // 作者
        catename: '', // 分类
        create_date: '', // 创建时间
        cateid: '', // 分类ID
        click: '', // 阅读次数
        ishot: '', // 推荐
        istop: '', // 置顶
        lovenum: '', // 收藏数量
        pic: '', // 图片
        tags: '', // 标签
        content: '', // 文本框
        description: '', // 文本
        keywords: ''// 关键字
      }
      // 移除校验
      this.$refs.form.clearValidate()
    }
  }
}
</script>
<style scoped>
#pane-third{
  width:1000px;
  margin:0 auto;
  height:400px;
}
.quill-editor{
  height:300px;
}
</style>
